<template>
    <Provider>
        <div class="app-wrapper" :class="{
            bg1: app.backgroundImg === 0 && !app.isThemeBg,
            bg2: app.backgroundImg === 1 && !app.isThemeBg,
            bg3: app.backgroundImg === 2 && !app.isThemeBg,
            bg4: app.backgroundImg === 3 && !app.isThemeBg,
            bg5: app.backgroundImg === 4 && !app.isThemeBg,
            bg6: app.backgroundImg === 5 && !app.isThemeBg,
            bg7: app.backgroundImg === 6 && !app.isThemeBg,
            bg8: app.isThemeBg
             }">
            <Sidebar></Sidebar>
            <User></User>
            <main class="main-wrapper" :class="{userFlag: app.userFlag,
            model: app.loginFlag || app.registerFlag || app.forgetFlag || app.emailFlag }">
                <router-view v-slot="{ Component, route }">
                    <keep-alive>
                        <component :is="Component" :key="route.path"/>
                    </keep-alive>
                </router-view>
            </main>
            <Login></Login>
            <Register></Register>
            <Forget></Forget>
            <Email></Email>
            <MusicPlayer></MusicPlayer>
            <Footer></Footer>
            <Tool></Tool>
        </div>
    </Provider>
</template>

<script setup lang="ts">
import useStore from "@/store";
import {getWebInfo, report} from "@/api/webInfo";

const {user, app, web} = useStore();
onMounted(() => {
    console.log(
        "%c 约起吧 %c " + user.nickname + " %c",
        "background:#e9546b ; padding: 1px; border-radius: 3px 0 0 3px;  color: #fff; padding:5px 0;",
        "background:#ec8c69 ; padding: 1px; border-radius: 0 3px 3px 0;  color: #000; padding:5px 0;",
        "background:transparent"
    );
    getWebInfo().then(({data}) => {
        web.setWebInfo(data.data);
    });
    document.documentElement.setAttribute('theme-sys', app.isDark ? 'dark' : 'light');
    document.documentElement.setAttribute('theme-el', app.themeName);
    report();
})
</script>

<style lang="scss" scoped>
.app-wrapper {
  position: relative;
  width: 100%;
  min-height: 100vh;

  &.bg1 {
    background: url(@/assets/images/bg/bg1l.jpg) no-repeat center center fixed;
    background-size: cover;
  }

  &.bg2 {
    background: url(@/assets/images/bg/bg2l.jpg) no-repeat center center fixed;
    background-size: cover;
  }

  &.bg3 {
    background: url(@/assets/images/bg/bg3l.jpg) no-repeat center center fixed;
    background-size: cover;
  }

  &.bg4 {
    background: url(@/assets/images/bg/bg4l.jpg) no-repeat center center fixed;
    background-size: cover;
  }

  &.bg5 {
    background: url(@/assets/images/bg/bg5l.jpg) no-repeat center center fixed;
    background-size: cover;
  }

  &.bg6 {
    background: url(@/assets/images/bg/bg6l.jpg) no-repeat center center fixed;
    background-size: cover;
  }

  &.bg7 {
    background: url(@/assets/images/bg/bg7l.jpg) no-repeat center center fixed;
    background-size: cover;
  }

  &.bg8 {
    background: var(--bg-color);
  }
}

.main-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 0 2rem;
  transition: width 0.25s ease;
  transition-delay: 0.4s;
}

.userFlag {
  width: calc(100% - 7rem);
}

.model {
  overflow: hidden;
  position: fixed;
  width: 100%;
}
</style>
